<style lang="scss">
        .invest-title{
            position: relative;
            height: 1px;
            background-color: rgba(black,.3);
            &::after{
                content: '打赏';
                font-size: 18px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate3d(-50%,-50%,0);
                padding: 10px;
                background-color: #fff;
            }
        }

        .invest-item{
            width: 90px;
            height: 50px;
            margin-bottom: 20px;
            margin-right: 20px;
            >.el-radio-button__inner{
                display: block;
                padding: 0;
                border:1px solid rgb(217, 207, 191);
                font-size: 18px;
                height: 100%;
                width: 100%;
                line-height: 50px;
            }
        }

</style>
<template>
    <ui-main>
        <!-- 打赏 -->
        <el-popover v-model="investPopver" ref="invest" placement="top" width="500" trigger="click">
            <div class="p20 pr50 pl50">
                <div class="invest-title mb30"></div>
                <el-radio-group v-model="investAmount">
                    <el-radio-button class="invest-item" label="20">20元</el-radio-button>
                    <el-radio-button class="invest-item" label="50">50元</el-radio-button>
                    <el-radio-button class="invest-item" label="100">100元</el-radio-button>
                    <el-radio-button class="invest-item" label="200">200元</el-radio-button>
                    <el-radio-button class="invest-item" label="500">500元</el-radio-button>
                </el-radio-group>

                <el-input type="number" min="0" v-model="coustomAmount" placeholder="输入要打赏的金额" size="large"></el-input>

                <el-button @click="doInvest" type="primary" class="mt20" size="large">确定打赏</el-button>
            </div>
        </el-popover>


        <div class="flex p40">
            <div class="flex-1 mr40">
                <ui-title>
                    {{data.post_title}}
                </ui-title>
                <div class="ml20 f10 f-color-grey">发表于 {{data.post_date}}</div>

                <div v-html="data.post_content" class="mb50 mt20"></div>

                <ui-title v-if="data.has_video==1">相关视频</ui-title>
                <video v-if="item.file_url" v-for="item in data.videos" :key="item.id" width="480" height="320" controls="controls" class="bg-grey">
                    <source :src="item.file_url" type="video/mp4">
                    你的浏览器不支持在线播放视频
                </video>

                <!-- 按钮组 -->
                <div class="mb50 mt50">
                    <!-- 点赞 -->
                    <el-button v-if="data.is_like" class="f-color-grey">
                        <div class="flex col-center">
                            <icon name="heart" class="f-color-red mr5"></icon>已赞 ({{data.post_like}})
                        </div>
                    </el-button>
                    <el-button @click="doLike" v-else>
                        <div class="flex col-center">
                            <icon name="heart-o" class="mr5"></icon>点赞 ({{data.post_like}})
                        </div>
                    </el-button>

                    <!-- 收藏 -->
                    <el-button v-if="data.is_favorite" @click="doStar(2)">
                        <div class="flex col-center">
                            <icon name="star" class="mr5 f-color-orange"></icon>已收藏 ({{data.post_favorite || 0}})
                        </div>
                    </el-button>
                    <el-button v-else @click="doStar(1)" class="f-color-grey">
                        <div class="flex col-center">
                            <icon name="star-o" class="mr5"></icon>收藏 ({{data.post_favorite || 0}})
                        </div>
                    </el-button>

                    <!-- 打赏 -->
                    <el-button v-if="data.is_inves" :disabled="true">已打赏 ({{data.post_inves}})</el-button>
                    <el-button v-else v-popover:invest type="primary">
                        <div class="flex col-center">
                            <icon name="rmb" class="mr5"></icon>
                            打赏
                        </div>
                    </el-button>
                </div>

                <!-- 已打赏用户 -->
                <div>
                    <div class="text-center f-color-text">
                        <span v-if="data.post_inves==0">还没有人打赏</span>
                        <span v-else>已有{{data.post_inves}}人打赏</span>
                    </div>
                    <div class="flex row-around m20" v-if="data.user_score">
                        <el-tooltip v-for="item in data.user_score" :key="item.id" effect="dark" :content="item.user_nicename || '匿名用户'" placement="top-start">
                            <ui-img  :url="item.avatar" class="ui-circle mr10 bg-grey" size="40px"></ui-img>
                        </el-tooltip>
                    </div>
                </div>

                <!-- 评论 -->
                <ui-title>评论 ({{data.comment_count}})</ui-title>
                <el-input v-model="commentText" type="textarea" :rows="5"></el-input>
                <el-button @click="doComment({postId:data.id})" type="primary" class="ui-button-large mt10">发表评论</el-button>

                <!-- 评论列表 -->
                <div class="mt20">
                    <div v-for="item in commentList" class="flex pt20 pb20 ui-border-bottom">
                        <ui-img :url="item.avatar" size="40px" class="mr10 ui-circle"></ui-img>
                        <div class="flex-1">
                            <div class="f14 mb5">
                                <span class="f-color-blue">{{item.user_nicename || '匿名用户'}}</span>
                                <span class="pl10 f10 f-color-grey">{{item.createtime_show}}</span>
                            </div>
                            <div class="f12 f-color-text">
                                {{item.content}}
                            </div>
                        </div>
                        <div class="flex row-end">
                            <el-button @click="replyComment(item)" type="text">回复</el-button>
                        </div>

                        <!-- 评论回复 -->
                        <div v-for="son in item.son" class="flex pt10 pb10 ui-border-bottom">
                            <ui-img :url="son.avatar" size="40px" class="mr10 ui-circle"></ui-img>
                            <div class="flex-1">
                                <div class="f14 mb5">
                                    <span class="f-color-blue">{{son.user_nicename || '匿名用户'}}</span>
                                    <span class="pl10 f10 f-color-grey">{{son.createtime_show}}</span>
                                </div>
                                <div class="f12 f-color-text">
                                    {{son.content}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <el-pagination
                    @current-change="getCommentList"
                    :current-page.sync="commentCurrentPage"
                    :page-size="5"
                    layout="prev, pager, next"
                    :total="parseInt(commentPageTotal)"
                    small
                    class="auto-center mt20 block"></el-pagination>
                </div>
            </div>


            <!-- 右侧 -->
            <div style="width:340px">
                <div class="p20 bg-light-white text-center">
                    <ui-img :url="data.avatar" size="60px" class="ui-circle bg-grey mb5"></ui-img>
                    <p class="f16">{{data.user_login}}</p>
                    <p class="f14 f-color-text">共发表{{data.post_num}}篇文章</p>
                </div>

                <el-button @click="$router.push('/tougao')" class="ui-button-large auto-center mt20" type="primary">投稿</el-button>

                <popular-articles></popular-articles>

                <evaluation-list></evaluation-list>

                <popular-vedioes></popular-vedioes>
            </div>
        </div>
    </ui-main>
</template>
<script>
    import evaluationList from '@/views/说事/测评列表.vue'
    import popularArticles from '@/views/说事/热门文章列表.vue'
    import popularVedioes from '@/views/说事/热门视频列表.vue'
    export default {
        components:{
            evaluationList,
            popularArticles,
            popularVedioes
        },
        data(){
            return {
                data:{},
                commentList:[],
                commentText:'',
                commentPageTotal:0,
                commentCurrentPage:1,
                investAmount:'',
                coustomAmount:'',
                investPopver:false
            }
        },
        methods:{
            doStar(type){
                this.$http.post('index.php?g=home&m=content&a=do_favorites', {
                    id: this.data.id,
                    type: type, //1收藏  2取消收藏
                    url: '/#' + this.$route.fullPath,
                })
                .then(({data})=>{
                    console.log('收藏文章',data)
                    // data.msg && this.$message(data.msg)
                    if (data.code===1) {
                        this.getArticleData()
                    }
                })
            },
            doLike(){
                this.$http.post('index.php?g=home&m=Like&a=do_like',{
                    id: this.data.id,
                    table: 'posts',
                    type:1
                })
                .then(({data})=>{
                    console.log('点赞文章',data)
                    this.$message(data.msg)
                    if (data.code==1) {
                        this.getArticleData()
                    }
                })
            },
            getCommentList(){//获取当前文章评论
                this.$http.get('index.php?g=home&m=Comments&a=comments_list', {
                    params:{
                        post_id: this.$route.query.id,
                        post_table:'posts',
                        page_size:5,
                        page_no:this.commentCurrentPage
                    }
                })
                .then(({data})=>{
                    // console.log('当前文章评论', data)
                    if (data.code==1) {
                        this.commentList = data.data
                        this.commentPageTotal = data.total//设置分页总数
                    }
                })
            },
            doComment({content=this.commentText,type='posts',postId='',toUid='',level}){//发评论
                this.$http.post('index.php?g=home&m=Comments&a=post_comments',{
                    content: content,
                    post_table: type,
                    post_id: postId,
                    to_uid:toUid,
                    level:level,
                    url: '/#' + this.$route.fullPath, //原文地址 (后台需要的)
                })
                .then(({data})=>{
                    console.log('发评论:', data)
                    this.$message(data.msg)
                    if (data.code===1) {
                        // 发送完毕,清空输入框
                        this.commentText = ''
                        // 重新获取评论数据
                        this.getCommentList()
                    }
                })
            },
            replyComment(item) {//回复评论
                this.$prompt('回复评论', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator:function(val){
                        return !!val
                    },
                    inputErrorMessage:'回复内容不能为空'
                }).then(({ value }) => {
                    this.doComment({
                        content:value,
                        postId:item.id,
                        toUid:item.uid,
                        level:item.level
                    })
                }).catch(() => {
                });
            },
            doInvest(){//打赏
                this.$http.post('index.php?g=home&m=Says&a=readscore',{
                    id:this.$route.query.id,
                    score: this.coustomAmount || this.investAmount
                })
                .then(({data})=>{
                    console.log('打赏',data)
                    data.msg && this.$message(data.msg)
                    if (data.code===1) {
                        this.investPopver = false//关闭打赏popover
                        this.getArticleData()
                    }
                })
            },
            getArticleData(){
                this.$http.get('index.php?g=home&m=content&a=get_post', {
                    params:{
                        id: this.$route.query.id
                    }
                })
                .then(({data})=>{
                    // 文章阅读权限，5为直接阅读，2,3,4需要会员登录才能阅读,默认为5
                    console.log('文章详情', data)
                    if (data.code===1) {
                        // 权限
                        if (data.data.title_limit==15) {
                            this.data = data.data
                        }else{
                            this.alert('你没有此文章的阅读权限')
                        }
                    }else{
                        // 未登录或错误
                        this.alert(data.msg)
                    }
                })
            },
            alert(msg){
                this.$alert(msg).then(() => {
                    this.$router.push('/shuoshi')
                })
            }
        },
        created(){
            // 获取文章详情
            this.getArticleData()

            // 获取评论内容
            this.getCommentList()
        },
        watch:{
            coustomAmount(v){//自定义打赏金额, 清空打赏固定金额
                if (v && parseInt(v)>0 && this.investAmount) {
                    this.investAmount = ''
                }
            },
            investAmount(v){//选择打赏固定金额,清空自定义金额
                if (v && this.coustomAmount) {
                    this.coustomAmount = ''
                }
            }
        },
    }
</script>
